<script setup lang="ts">
import useCartStore from "@/stores/cart";
import useUserStore from "@/stores/user";
import type {Sku} from "@/stores/cart";
import {ref, onMounted, computed} from "vue";
import {useRouter} from "vue-router";
import {storeToRefs} from "pinia";
import {ElMessage, ElMessageBox} from "element-plus";
import 'element-plus/theme-chalk/el-message.css'
const router = useRouter();
const cartStore = useCartStore();
const userStore = useUserStore()
const {userInfo} = storeToRefs(userStore)
// const cartList = ref<Sku[]>([]);
const {list:cartList} = storeToRefs(cartStore) //购物车列表
onMounted(()=>{
  cartList.value = cartStore.getCartList()
})
const proCount = computed(()=> {
  return cartList.value.reduce((sum,item)=>{
    return sum + item.count
  },0)
})
const selectProCount = computed(()=> {
  const list = cartList.value.filter(item=>item.selected)
  return list.reduce((sum,item)=>{
    return sum + item.count
  },0)
})
const proPrice = computed(()=> {
  const list = cartList.value.filter(item=>item.selected)
  return list.reduce((sum,item)=>{
    return sum + item.count * item.price
  },0)
})
function change(skuId:string,num:number){
  cartStore.changeCartCount(skuId,num)
}
function check() {
  if(selectProCount.value<1){
    ElMessageBox.confirm(
        '暂未选中任何商品，无法结算',
        'Warning',
        {
          confirmButtonText: '去挑选商品',
          type: 'warning',
        }
    )
  }else {
    if(userInfo){
      router.push('/check')
    }else {
      ElMessage.error('请先登录')
      router.push('/login')
    }
  }
}
function delPro(skuId:string){
  cartStore.delCart(skuId)
  cartList.value = cartStore.getCartList()
}
const allSelected = ref(false)
//不确定状态
const indeterminate = ref(false)
//购物车全选
function toggleAllSelection(){
  indeterminate.value = false
  cartList.value.forEach((item)=>{item.selected = allSelected.value})
  cartStore.changeCartSelected(cartList.value)
}
function selectChange(){
  console.log('aaaaaaaaaa')
  const list = cartList.value.filter(item=>item.selected)
  if(list.length>0 && list.length<cartList.value.length){
    indeterminate.value = true
  }else if(list.length===cartList.value.length){
    indeterminate.value = false
    allSelected.value = true
  }else{
    indeterminate.value = false
    allSelected.value = false
  }
  cartStore.changeCartSelected(cartList.value)
}
onMounted(() => selectChange())
</script>

<template>
 <div class="cart">
   <el-table :data="cartList" style="width: 100%;max-height: 600px "  >
     <el-table-column   >
       <template #header>
         <el-checkbox v-model="allSelected" :indeterminate="indeterminate" @change="toggleAllSelection"></el-checkbox>
       </template>
       <template #default="scope">
         <el-checkbox v-model="scope.row.selected"  @change="selectChange"></el-checkbox>
       </template>
     </el-table-column>
     <el-table-column label="商品信息" >
       <template #default="scope">
         <div class="product">
           <img :src="scope.row.picUrl" alt="" >
           <span>{{scope.row.name}}</span>
         </div>
       </template>
     </el-table-column>
     <el-table-column prop="price" label="单价" />
     <el-table-column label="数量" >
       <template #default="scope">
         <el-input-number v-model="scope.row.count" :max="scope.row.inventory" min="1" @change="change(scope.row.skuId,scope.row.count)" />
       </template>
     </el-table-column>
     <el-table-column  label="小计" >
       <template #default="scope">
         {{(scope.row.price * scope.row.count).toFixed(2)}}
       </template>
     </el-table-column >
     <el-table-column  label="操作" >
       <template #default="scope">
         <a href="javascript:;" @click="delPro(scope.row.skuId)"> 删除</a>
       </template>
     </el-table-column>
   </el-table>
   <div class="check">
     <p>共 {{proCount}} 件商品，已选择 {{selectProCount}} 件,商品合计: <span>￥{{proPrice.toFixed(2)}}</span> </p>
     <el-button type="primary" style="float: right" @click="check">下单结算</el-button>
   </div>
 </div>
</template>

<style scoped>
.cart{
  width: 70vw;
  margin: 0 auto;
  margin-top: 30px ;
}
a{
  color: #27ba9b;
}
.product, .check {
  display: flex;
  justify-content: start;
  align-items: center;
  span{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  img{
    width: 100px;
  }
}
.check{
  justify-content: space-around;
  span{
    color: red;
  }
}
table td div{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
